<template>
  <view class="wrap">
    <u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
      <u-form-item :label-position="labelPosition" label="手机号" prop="mobile" label-width="150" v-if="type == 'mobile'">
        <u-input :border="border" placeholder="请输入手机号" v-model="model.mobile" type="text"></u-input>
      </u-form-item>
      <u-form-item :label-position="labelPosition" label="邮箱" prop="email" label-width="150" v-if="type == 'email'">
        <u-input :border="border" placeholder="请输入邮箱" v-model="model.email" type="text"></u-input>
      </u-form-item>
      <u-form-item :label-position="labelPosition" label="验证码" prop="verification_code" label-width="150">
        <u-input :border="border" placeholder="请输入验证码" v-model="model.verification_code" type="text"></u-input>
        <u-button slot="right" type="success" size="mini" @click="getCode">{{ second }}</u-button>
      </u-form-item>
    </u-form>
    <button class="btn u-border" @tap="submit">提交</button>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
let second = 60; //倒计时时间
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['user'])
  },
  data() {
    return {
      model: {
        mobile: '',
        email: '',
        verification_code: ''
      },
      second: '获取验证码',
      interval: null,
      title: '',
      rules: {
        mobile: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['change', 'blur']
          }
        ],
        email: [
          {
            required: true,
            message: '请输入邮箱',
            trigger: ['change', 'blur']
          }
        ],
        verification_code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: ['change', 'blur']
          }
        ]
      },
      labelPosition: 'left',
      border: false,
      errorType: ['message'],
      type: ''
    };
  },
  onLoad(options) {
    this.type = options.type;
    this.model.mobile = this.user.mobile;
    this.model.email = this.user.user_email;
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    submit() {
      let url = '';
      if (this.type == 'mobile') {
        url = 'user/profile/bindingMobile';
        if (this.model.mobile == '') {
          return;
        }
      }
      if (this.type == 'email') {
        url = 'user/profile/bindingEmail';
        if (this.model.email == '') {
          return;
        }
      }
      this.$loading();
      this.$api.post({
        url: url,
        data: this.model,
        success: res => {
          if (res.code == 1) {
            if (this.type == 'mobile') {
              this.user.mobile = this.model.mobile;
            }
            if (this.type == 'email') {
              this.user.user_email = this.model.email;
            }
            this.$store.commit('updateUserInfo', this.user); // 保存变更信息
            this.$refs.uToast.show({
              title: res.msg,
              type: 'success',
              callback: () => {
                uni.navigateBack();
              }
            });
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: 'error'
            });
          }
        },
        complete: () => {
          uni.hideLoading();
        }
      });
    },
    getCaptcha() {
      this.second = second;
      this.$refs.uToast.show({
        title: this.title,
        type: 'success'
      });
      this.interval = setInterval(() => {
        this.second--;
        if (this.second <= 0) {
          this.second = '重新获取';
          clearInterval(this.interval);
        }
      }, 1000);
    },
    getCode() {
      if (typeof this.second == 'number') {
        return;
      }
      if (this.type == 'mobile') {
        if (this.$u.test.mobile(this.model.mobile)) {
          this.title = '已发送验证码至您的手机';
          this.$api.getVerifiCode(this.model.mobile, this.getCaptcha());
        } else {
          this.$refs.uToast.show({
            title: '请输入正确的手机号',
            type: 'warning'
          });
        }
      }
      if (this.type == 'email') {
        if (this.$u.test.email(this.model.email)) {
          this.title = '已发送验证码至您的邮箱';
          this.$api.getVerifiCode(this.model.email, this.getCaptcha());
        } else {
          this.$refs.uToast.show({
            title: '请输入正确的邮箱',
            type: 'warning'
          });
        }
      }
    }
  }
};
</script>

<style scoped lang="scss">
.wrap {
  padding: 30rpx;
  background: #fff;
}
.btn {
  margin-top: 30rpx;
  color: #848484;
}
</style>
